<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>有奖竞猜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        * {
            margin: 0;
            padding: 0
        }
        body {
            background: linear-gradient(#d13d4b, #8b2537);/*原设计颜色*/
        }
        .guess-ani {
            position: absolute;
        }
        .guess-txt {
            position: absolute;
        }
        a:visited {
            color: #ffffff;
        }
        a:hover {
            color: #ffffff;
        }
        @media (min-width: 769px) {
            body {
                height: 1955px;
                background: linear-gradient(#d13d4b, #8b2537);/*原设计颜色*/
                position: relative;
            }
        }
    </style>
</head>
<body class="guess-resize" style="position:relative;height:480px">
<!--灯笼左右-->
<img src="img/lantern_l.png" class="guess-resize guess-ani" style="width:133px;height:75px;top:15px;left:0;z-index:3;">
<img src="img/lantern_r.png" class="guess-resize guess-ani" style="width:137px;height:107px;top:15px;right:0;z-index:3;">
<!--边框左右-->
<img src="img/pttqjqhs_l.png" class="guess-resize guess-ani" style="width:105px;height:353px;top:96px;left:0;z-index:3;">
<img src="img/pttqjqhs_r.png" class="guess-resize guess-ani" style="width:78px;height:353px;top:96px;right:0;z-index:3;">
<!--烟花左右-->
<img src="img/firework_s.png" class="guess-resize guess-ani" style="width:23px;height:23px;top:277px;left:56px;z-index:3;">
<img src="img/firework_l.png" class="guess-resize guess-ani" style="width:26px;height:26px;top:251px;right:56px;z-index:3;">
<!--建筑底部-->
<img src="img/buildings.png" class="guess-resize guess-ani" style="width:320px;height:66px;bottom:0;">
<!--有奖竞猜-->
<p class="guess-resize guess-ani" style="width:80px;height:18px;left:0;right:0;margin:0 auto;top:90px;font-size:20px;color:#f6c646;">有奖竞猜</p>
<!--金额：-->
<p class="guess-resize guess-ani" style="width:60px;height:18px;left:50px;top:182px;font-size:20px;color:#f6c646">金额：</p>
<!--input框-->
<input class="guess-resize guess-ani guess-number" style="width:114px;height:30px;top:181px;left:110px;padding-left:6px;font-size:22px;color:white;
background:none;border:1px solid #f6c646;outline:none" type="text"  onkeyup="clearNoNum(this)">
<!--单位：万元-->
<p class="guess-resize guess-ani" style="width:50px;height:18px;left:230px;top:182px;font-size:20px;color:#f6c646">万元</p>
<!--确定按钮-->
<button class="guess-resize guess-ani" style="background: url('img/confirm.png') no-repeat 0 0/contain;width:77px;height:29px;top:250px;
left:0;right:0;margin:0 auto;border:none;outline:none;" onclick="guessSent();"></button>
<!--文字描述-->
<!--<p class="guess-resize guess-ani" style="width:217px;font-size:12px;top:310px;left:0;right:0;margin:0 auto;
color:#f6c646;">请在对话框里输入在2017年里，公司一年所发放的奖金一共有多少，大胆猜测，然后输入你所知道奖金数额，点击确定。</p>-->
<!--提交提示-->
<p class="guess-ani guess-resize guess-p-tooltip" style="width:126px;top:366px;left:0;right:0;margin:0 auto;font-size:14px;color:white;display:none;"></p>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--<![endif]-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/quping.js"></script>
<script>
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        setTimeout(window.location.reload(true),800)
    }, false);

    /*不同尺寸屏幕手机样式适配*/
    scaleW = window.innerWidth/320;
    scaleH = window.innerHeight/480;
    var resizes = document.querySelectorAll('.guess-resize');
    for (var j=0; j<resizes.length; j++) {
        if (window.innerWidth <= 768) {
            if (window.innerWidth > window.innerHeight){
                /*input框横屏width特殊调整*/
                if(resizes[j].style.width === '114px'){
                    resizes[j].style.width = parseInt(resizes[j].style.width)*scaleH*1.2 + 'px';
                }else{
                    resizes[j].style.width = parseInt(resizes[j].style.width)*scaleH + 'px';
                }
                /*如果是烟花，纵向用scaleW的比例*/
                if (resizes[j].style.height === '23px'||resizes[j].style.height === '26px') {
                    resizes[j].style.height = parseInt(resizes[j].style.height)*scaleH + 'px';
                }else{
                    resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
                }

                /*input框横屏top特殊调整*/
                if(resizes[j].style.top === '181px'){
                    if(scaleH === 1){
                        resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
                    }
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW*0.98 + 'px';
                }else{
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
                }
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';

                if(resizes[j].style.left === '50px'||resizes[j].style.left === '110px'||resizes[j].style.left === '230px'){
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH*1.2 + 'px';
                }else{
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH + 'px';
                }

                resizes[j].style.right = parseInt(resizes[j].style.right)*scaleH + 'px';

                resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleW + 'px';
                resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleW + 'px';
                resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleH + 'px';
                resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleH + 'px';

                resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleW + 'px';
                resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleH + 'px';

                resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleH + 'px';
                resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleH + 'px';
                resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleH + 'px';
            }
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            /*如果是烟花，纵向用scaleW的比例*/
            if (resizes[j].style.height === '23px'||resizes[j].style.height === '26px') {
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
            }else{
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleH + 'px';
            }
            /*input框特殊调整*/
            if(resizes[j].style.top === '181px'){
                if(scaleH === 1){
                    resizes[j].style.top = parseInt(resizes[j].style.top) + 'px';
                }else{
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleH*0.98 + 'px';
                }
            }else{
                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleH + 'px';
            }
            resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';

            resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleH + 'px';
            resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleH + 'px';
            resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
            resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';

            resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleH + 'px';
            resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleW + 'px';

            resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleW + 'px';
            resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleW + 'px';
            resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleW + 'px';
        }else{
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';

            /*input框特殊调整*/
            if(resizes[j].style.top === '181px'){
                if(scaleH === 1){
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
                }
                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW*0.98 + 'px';
            }else{
                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
            }
            resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';

            resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleW + 'px';
            resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleW + 'px';
            resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
            resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';

            resizes[j].style.paddingBottom = parseInt(resizes[j].style.paddingBottom)*scaleW + 'px';
            resizes[j].style.paddingLeft = parseInt(resizes[j].style.paddingLeft)*scaleW + 'px';

            resizes[j].style.letterSpacing = parseInt(resizes[j].style.letterSpacing)*scaleW + 'px';
            resizes[j].style.borderRadius = parseInt(resizes[j].style.borderRadius)*scaleW + 'px';
            resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleW + 'px';
        }
    }
    /*不同尺寸屏幕手机字体大小适配*/
    var scales = document.querySelectorAll('.guess-txt');
    for (var i=0; i<scales.length; i++) {
        var ss = scales[i].style;
        ss.webkitTransform =
            ss.MsTransform =
                ss.msTransform =
                    ss.MozTransform =
                        ss.OTransform =
                            ss.transform=
                                'translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px)' +
                                'translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)' +
                                'scaleX('+scaleW+')' +
                                'scaleY('+scaleH+')';
    }
    /*限制input输入的内容*/
    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");  /*清除“数字”和“.”以外的字符*/
        obj.value = obj.value.replace(/\.{2,}/g,"."); /*只保留第一个. 清除多余的*/
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');/*只能输入两个小数*/
        if(obj.value.indexOf(".")< 0 && obj.value !=""){/*以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额*/
            obj.value= parseFloat(obj.value);
        }
    }

    qp.cfg.jsonUrl= 'http://10.0.0.8:8000/server/?cb=?';
    /*qp.cfg.jsonUrl= 'https://weixin.zunyaohui.com/server/?cb=?';*/

    /*发送数字*/
    function guessSent() {
        /*var openid = qp.get('openid');*/
        /*var openid = 'oIj9xuNTDPJIhH56WkAEA2uajM7o';*/
        var openid = 'oIj9xuMCtDnCBFDmX7EwkMr8TIbM';
        var guessNumber = $('.guess-number').val();
        if (guessNumber){
            qp.json.get({
                cls:'guess',
                act:'post',
                openid:openid,
                value:guessNumber
            },function(data){
                console.log(data);
                $('.guess-p-tooltip').text('');
                setTimeout(function(){
                    $('.guess-p-tooltip').text(data['errmsg']).show(200,'linear');
                },300)
            });
        }else{
            $('.guess-p-tooltip').text('');
            setTimeout(function(){
                $('.guess-p-tooltip').text('请先输入数字！').show(200,'linear');
            },300)
        }
    }
</script>
</body>
</html>